<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Bootstrap 5</title>

</head>

<body>
    <div class="container border border-success p-2 mb-2">.container</div>
    <div class="container-sm border border-success p-2 mb-2">.container-sm(≥576px)</div>
    <div class="container-md border border-success p-2 mb-2">.container-md(≥768px)</div>
    <div class="container-lg border border-success p-2 mb-2">.container-lg(≥992px)</div>
    <div class="container-xl border border-success p-2 mb-2">.container-xl(≥1200px)</div>
    <div class="container-xxl border border-success p-2 mb-2">.container-xxl(≥1400px)</div>
    <div class="container-fluid border border-success p-2 mb-2">.container-fluid</div>
    <hr>
    <p>窗口宽度: <span id="width"></span></p>
    <script>
        var widthOutput = document.querySelector('#width');

        function resize() {
            widthOutput.textContent = window.innerWidth;
        }
        window.onresize = resize;
        resize();
    </script>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>


</html>